<template>

  <div class="navbar">

    <div class="content-main">

      <ul style="display: inline-block;">
        <li class="subfield" style="display: inline-block;" v-for="(route, index) in routerList" :key="route.path">
          <router-link :to="route.path"  class="link-style">
            {{ route.name }}
          </router-link>
        </li>
      </ul>

      <div class="logo"  style="display: inline-block;">
        <img src="../assets/logo.png" class="logo-img" />
      </div>

      <div class="query" @click="handleClick" style="display: inline-block;">
        <img src="./query.png" class="query-img" />
      </div>

      <div class="user" style="display: inline-block;">
        <div class="avatar">
          <img :src="userInfo.avatar" alt="用户头像">
        </div>
      </div>
    </div>

    <!-- <div class="content">
      <router-view @send-data="handleData"></router-view>
    </div> -->

    <div class="content">
      <router-view @send-data="handleData" :shareData="shareData" ></router-view>
    </div>

  </div>
  <div class="account">
    <div class="user-info">
      
      <div class="avatar">
        <img :src="userInfo.avatar" alt="用户头像">
      </div>

      <div class="info">
        <h2>{{ userInfo.name }}</h2>
        <div class="inline-group" style="line-height: 2;">
          <span>{{"ID："+ userInfo.id }}</span>
          <span class="divider"> </span>
          <span>{{"IP属地："+ userInfo.ipLocation }}</span>
        </div>
        <div class="inline-group" style="line-height: 2;">
          <span>{{"关注："+ userInfo.followings }}</span>
          <span class="divider"></span>
          <span>{{ "粉丝："+userInfo.followers }}</span>
          <span class="divider"></span>
          <span>{{ "点赞："+userInfo.likes }}</span>
        </div>
      </div>
      <div class="action-buttons">
        <button @click="toggleFollow">关注</button>
      </div>
    </div>
    <!--排列帖子-->
    <div class="container">
      <div class="column">
        <div class="box medium"></div>
        <div class="box small"></div>
        <div class="box small"></div>
        <div class="box large"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
      </div>
      <div class="column">
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
      </div>
      <div class="column">
        <div class="box small"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
      </div>
      <div class="column">
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
      </div>
      <div class="column">
        <div class="box large"></div>
        <div class="box medium"></div>
        <div class="box small"></div>
        <div class="box small"></div>
        <div class="box large"></div>
        <div class="box medium"></div>
      </div>
      <div class="column">
        <div class="box small"></div>
        <div class="box large"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
        <div class="box medium"></div>
      </div>
    </div>
  </div>
</template>

<script>
import userphoto from '@/assets/user/userphoto1.png'
export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo: {
        avatar: userphoto,
        name: '刘二狗',
        id: '12345678',
        ipLocation: '中国北京',
        followings: 250,
        followers: 250,
        likes: 250,
        isFollowing: false
      },
      routerList: [
        {
          path: "/",
          name: "首页",
        },
        {
          path: "/QA",
          name: "智能问答",
        },
        {
          path: "/Feedback",
          name: "反馈界面",
        },
        // {
        //   path: "/overview",
        //   name: "非遗概览",
        // },
        {
          path: "/community",
          name: "交流社区",
        },
        {
          path: "/E_Shopping_Mall",
          name: "非遗商城",
        },
        {
          path: "/test",
          name: "答题界面",
        },
      ],
      shareData:null
    }
  },
  methods: {
    toggleFollow() {
      // 这里是处理关注逻辑的代码
      // 例如，改变isFollowing的值，并可能发送请求到后端
      this.isFollowing = !this.isFollowing;
      // 假设有一个方法sendFollowRequest来处理网络请求
      // if (this.isFollowing) {
      //   this.sendFollowRequest();
      // } else {
      //   // 取消关注的逻辑
      // }
    },
    // sendFollowRequest() {
    //   // 发送关注请求到后端的逻辑
    // }
    openLinkInNewTab(url) {
      window.open(url, '_blank').focus();
    },
    handleClick() {
      // 点击后跳转到 '/other' 路由
      this.$router.push('/query');
    },
    handleData(data) {
      console.log("parent:", data);
      this.shareData = data;
    }
  }
}
</script>

<style scoped>
.navbar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(168, 140, 75, 0.6);
  width: 100%;
  padding: 1rem;
}
.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 3vw;
  width: 8vh;
  height: 8vh;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.nav-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.subfield {
  margin: 0 1rem;
}

.link-style {
  font-size: 1.2vw;
  color: rgb(68, 71, 35);
  text-decoration: none;
}

.link-style:hover {
  color: black;
  text-decoration: underline;
}

.query {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 32vw;
  margin-right: 8%;
}

.query-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.user {
  display: flex;
  align-items: center;
  margin-left: 1vw;
}

.custom-button {
  margin-left: 1vw;
  width: 4vw;
  height:6vh;
  border-radius: 2vh;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.account{
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 250px;
}
.user-info {
  display: flex;
  width: 100%;
  align-items: center;
  margin-left: 50px;
}

.avatar img {
  width: 8vh;
  height: 8vh;
  border-radius: 50%;
  margin-right: 20px;
}

.info {
  flex: 1;
}

.info h2 {
  margin: 0 0 10px 0;
}

.inline-group {
  display: flex;
  align-items: center;
}

.inline-group span {
  margin: 0 5px; /* Add some margin for better visual separation */
}

.divider {
  border-right: 1px solid #ccc; /* Adjust color as needed */
  height: 16px; /* Adjust height based on your font size and styling */
  display: inline-block;
  margin: 0 5px; /* Add some margin around the divider */
  vertical-align: middle; /* Vertical align with text */
}

.container {
  display: flex;
  width:100%;
  flex-wrap: wrap;
  padding: 10px; /* 可选，为容器添加一些内边距 */
  height: 95%; /* 设置容器的高度 */
  overflow-y: auto; /* 当内容超出容器高度时，显示垂直滚动条 */
}

.column {
  flex: 1 0 10%; /* 调整为23%以考虑间隔 */
  margin-right: 2%; /* 列之间的间隔 */
  display: flex; /* 将列也设置为Flex容器 */
  flex-direction: column; /* 子元素垂直排列 */
}

.box {
  /* 通用样式 */
  border-radius:36px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #D9D9D9;
  margin-bottom: 10px; /* 盒子之间的垂直间隔 */
}
.large {
  height: 323px;
}

.medium {
  height:249px;
}

.small {
  height:193px;
}

</style>